<template>
	<div style="background-color: #171717; height: 150vmin">
		<div style="font-size: 30px; margin: 10px 20px;margin-bottom: 20px;color: #fff;">我的工单</div>
		<div class="big">
			<div class="row"
				style="width: 95%; height: 50px;margin: 10px auto; position: relative;align-items: center;">

				<div @click="addexa = true" class="row new_work use new_work_order"
					style="color: #fff;font-weight: 600;align-items: center;justify-content: center;width: 14%;">
					+新的工单
				</div>


				<el-select v-model="value" placeholder="全部"
					style="position: absolute; right: 0;bottom: 0; height: 40px; width: 150px;padding: 0 5px; border-radius: 5px;">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</div>
			<div class="">
				<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
					style="width: 95%; margin: 0 auto;" max-height="420" v-loading="loading">
					<el-table-column prop="id" label="工单编号" width="">
					</el-table-column>
					<el-table-column prop="title" label="主题" width="">
					</el-table-column>
					<el-table-column prop="price" label="产品" width="">
					</el-table-column>
					<el-table-column prop="finishTime" label="状态" width="">
					</el-table-column>
					<el-table-column prop="content" label="内容" width="">
					</el-table-column>
					<el-table-column prop="status" label="创建时间" width="">
					</el-table-column>
					<el-table-column prop="status" label="最后回复" width="">
					</el-table-column>
					<el-table-column prop="operate" label="操作" width="">
						<template slot-scope="scope">
							<el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text"
								size="small">
								移除
							</el-button>
							<el-button @click.native.prevent="toAsk(scope.$index, tableData)" type="text" size="small">
								咨询
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div style="margin: 20px 0 10px 0; display: flex; justify-content: center;">
				<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="currentPage" :page-size="pagesize" :page-sizes="[5,10, 20, 30, 40]" :total="totalnum"
					layout="total,jumper,prev, pager ,next,sizes">
				</el-pagination>
			</div>
		</div>

		<el-dialog title="新建工单" :visible.sync="addexa" width="30%">
			<div class="column">
				<h3>
					主题
				</h3>
				<el-input v-model="new_from.theme" placeholder="请输入工单主题"></el-input>
			</div>
			<div class="column">
				<h3>
					产品
				</h3>
				<el-select v-model="new_from.product" placeholder="请选择产品">
					<el-option v-for="item in product" :key="item.value" :label="item.robotName"
						:value="item.encryptRobotId">
					</el-option>
				</el-select>
			</div>
			<div class="column">
				<h3>
					问题描述
				</h3>
				<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="new_from.describe"
					:autosize="{ minRows: 5}">
				</el-input>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addexa = false">取 消</el-button>
				<el-button type="primary" @click="submitForm('new_from')">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	import axios from 'axios';
	import {
		WorkSave,
		pageByWork,
		getMachineInfoByUserId
	} from '../../api/work.js'
	export default {
		data() {
			return {
				options: [{
					value: '选项1',
					label: '全部'
				}, {
					value: '选项2',
					label: '未支付'
				}, {
					value: '选项3',
					label: '已支付'
				}, {
					value: '选项4',
					label: '被取消'
				}, {
					value: '选项5',
					label: '已退款'
				}],
				product: [{
					value: '镇江高防4H8G云服务器',
					label: '镇江高防4H8G云服务器'
				}, {
					value: '美国硅谷服务器',
					label: '美国硅谷服务器'
				}],
				value: '',
				tableData: [],
				addexa: false,
				new_from: {
					theme: "",
					product: "",
					describe: ""
				},
				totalnum: 0, //总数据条数
				currentPage: 1, //起始页
				pagesize: 10, //每一页的数据条数,
				loading: false
			};
		},
		computed: {
			// 计算属性
		},
		mounted() {
			this.JudgingLogin()
			this.loadData()
			this.getAllMyGoods()
		},
		beforeDestroy() {

		},
		methods: {
			getAllMyGoods() {
				let data = {
					userid: localStorage.getItem("USER-ID")
				}
				// 根据用户id 获取所有信息
				getMachineInfoByUserId(data).then(response => {
					// 请求成功，处理返回的数据
					if (response.data.length === 0) {
						console.log('没东西啊兄弟', response)
						this.havegoods = true
					} else {
						this.product = response.data
						console.log(response)
					}
				}).catch(error => {
					// 请求失败，处理错误信息  
					this.error = error;
				});



			},
			// 页面变化
			toAsk() {
				console.log("进入在线咨询")
				this.$router.push("/demo/userchat")
			},
			handleSizeChange: function(pagesize) {
				this.pagesize = pagesize;
				this.loadData()
			},
			// 监听页数变化
			handleCurrentChange(val) {
				this.currentPage = val;
				this.loadData()
			},
			loadData() {
				this.tableData = []
				this.loading = true

				// console.log(data)
				// axios.get(this.GLOBAL.BASE_URL+'/taskindent/pageByPramas?page=' + page + '&limit=' + page_size, {params:data //101.37.174.73:8901
				// })

				let data = {
					page: this.currentPage,
					limit: this.pagesize,
					userId: localStorage.getItem("USER-ID")
				}
				pageByWork(data).then(res => {
					console.log(res)
					this.totalnum = res.total;
					console.log("!@3123")
					let i = this.currentPage - 1
					for (let j = 0; j < i * this.pagesize; j++) {
						this.tableData.push("");
					}
					for (let m = 0; m < this.pagesize; m++) {
						if (!res.list[m]) {
							break
						}
						this.tableData.push(res.list[m]);
					}
					console.log(res)
					this.$nextTick(() => {
						this.loading = false
						// this.$refs.tableData.doLayout()
					})
					console.log(res)

				}).catch((err) => {
					console.log(err)
					this.$message({
						showClose: true,
						message: '无法加载数据，请联系后台管理员',
						type: 'error'
					});
					this.loading = false
				})
			},
			deleteRow(index, rows) {
				rows.splice(index, 1);
			},
			// created(){
			//     axios.get('http://45.145.75.2:8102/orders/loadAll')
			//       .then(response => {
			// 		  console.log(response)
			//         // this.tableData = response.data.message;
			//       })
			//       .catch(error => {
			//         console.error(error);
			//       });
			//   },
			// 编辑、增加页面保存方法
			submitForm(editData) {
				console.log('888888')
				this.dataListA = []
				let data = {
					userId: localStorage.getItem("USER-ID"),
					title: this.new_from.theme,
					content: this.new_from.describe,
					productId: this.new_from.product
				}
				WorkSave(data).then(res => {
					console.log(res)
					if (res == "saveSuccess") {
						this.$message({
							type: 'success',
							message: '工单发送成功！'
						})
					}
				})
			},
			// 判断登录
			JudgingLogin() {
				console.log("登录信息")
				console.log(localStorage.getItem("LZY-TOKEN"))
				// 弹出提示框 ，请先登录
				if (localStorage.getItem("LZY-TOKEN") == null) {
					this.openLoginMessage()
				}
			},
			openLoginMessage() {
				this.$alert('还未登录，请先登录！', '登录提醒', {
					confirmButtonText: '确定',
					callback: action => {
						this.$router.push({
							path: '/login',
						})
					}
				});
			}

		}
	};
</script>

<style>
	.my_goods {
		width: 95%;
		height: 250px;
		margin-bottom: 30px;
		border-radius: 10px;
		margin-left: 20px;
		background-color: #f6f8fb;
	}

	.big {
		background-color: #171717;
		width: 95%;
		margin: 0 auto;
		padding-bottom: 10px;
	}

	.new_work {
		cursor: pointer;
	}

	.el-dialog__header {
		background-color: #171717;


	}

	.el-dialog__title {
		color: #fff;

	}

	.el-dialog__body {
		background-color: #171717;
	}

	h3 {
		color: #fff;
	}

	.el-input__inner {
		background-color: #171717;
		color: #fff;
	}

	.el-textarea__inner {
		background-color: #171717;
		color: #fff;
	}

	.el-dialog__footer {
		background-color: #171717;
	}

	.el-table th.el-table__cell {
		background-color: #171717;
		color: #fff;
	}

	.el-select-dropdown__list {
		background-color: #171717;
	}

	.el-select-dropdown__item {
		color: #fff;
	}

	.el-select-dropdown__item.hover,
	.el-select-dropdown__item:hover {
		background-color: #4c4c4c;
	}

	.new_work_order {
		--border-radius: 15px;
		--border-width: 4px;
		appearance: none;
		position: relative;
		padding: 1em 2em;
		border: 0;
		background-color: transparent;
		font-family: "Roboto", Arial, "Segoe UI", sans-serif;
		font-size: 18px;
		font-weight: 500;
		color: #fff;
		z-index: 2;
	}

	.new_work_order::after {
		--m-i: linear-gradient(#000, #000);
		--m-o: content-box, padding-box;
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		padding: var(--border-width);
		border-radius: var(--border-radius);
		background-image: conic-gradient(#488cfb,
				#29dbbc,
				#ddf505,
				#ff9f0e,
				#e440bb,
				#655adc,
				#488cfb);
		-webkit-mask-image: var(--m-i), var(--m-i);
		mask-image: var(--m-i), var(--m-i);
		-webkit-mask-origin: var(--m-o);
		mask-origin: var(--m-o);
		-webkit-mask-clip: var(--m-o);
		mask-composite: exclude;
		-webkit-mask-composite: destination-out;
		filter: hue-rotate(0);
		animation: rotate-hue linear 500ms infinite;
		animation-play-state: paused;
	}

	.new_work_order:hover::after {
		animation-play-state: running;
	}

	@keyframes rotate-hue {
		to {
			filter: hue-rotate(1turn);
		}
	}

	.new_work_order,
	.new_work_order::after {
		box-sizing: border-box;
	}

	.new_work_order:active {
		--border-width: 5px;
	}

	.el-table__cell {
		background-color: #171717 !important;
	}

	.el-input__inner {
		background-color: #171717;
	}

	.el-table th.el-table__cell>.cell {
		color: #fff;
	}

	.el-table .cell {
		color: #fff;
	}
</style>